<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>年级计划</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body style="overflow: hidden;">
	<div class="card-fouth">
		<div class="desc desc-list">
			<div class="industry first active">
				<span>高一年级计划表</span>
			</div>

			<div class="industry">
				<span>高二年级计划表</span>
			</div>

			<div class="industry">
				<span>高三年级计划表</span>
			</div>

		</div>
		<div class="case-container">

			<div class="case-panel tab-1 active" >
				<div style="width: 100%;height: 100%;">
					<iframe src="./jindu1/index.html" style="width: 100%;height: 100%;border: none;"></iframe>
				</div>
			</div>

			<div class="case-panel tab-2">
				<div style="width: 100%;height: 100%;">
					<iframe src="./jindu1/index1.html" style="width: 100%;height: 100%;border: none;"></iframe>
				</div>
			</div>

			<div class="case-panel tab-3">
				<div style="width: 100%;height: 100%;">
					<iframe src="./jindu1/index2.html" style="width: 100%;height: 100%;border: none;"></iframe>
				</div>
			</div>

		</div>
	</div>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			var i = 0; //初始变量
			var k = 0; //初始变量
			var h = 3; //默认第一个内容条数
			let intervalId;
			//自动执行,间隔5秒
			function startInterval() {
				intervalId = setInterval(function () {
					$('.industry').eq(k).addClass('active').siblings().removeClass('active');
					$('.case-panel').eq(k).addClass('active').siblings().removeClass('active');
					k >= h - 1 ? k = 0 : k++;
				}, 5000)
			}
			function clearIntervals() {
				clearInterval(intervalId);
			}
			startInterval();
			//分类tap
			$('.industry').hover(function () {
				i = $(this).index(); //当前索引
				$(this).addClass('active').siblings().removeClass('active');
				$('.case-panel').eq(i).addClass('active').siblings().removeClass('active');
				clearIntervals(intervalId)
			})

			$('.industry').mouseleave(function () {
				startInterval();
			})

			$('.case-panel').hover(function () {
				clearIntervals();
			})

			$('.case-panel').mouseleave(function () {
				startInterval();
			})
		})
	</script>

</body>

</html>